<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小车卡片炫酷样式演示</title>
  <style>
    body {
      background: linear-gradient(120deg, #e3f2fd 0%, #bbdefb 100%);
      min-height: 100vh;
      margin: 0;
      font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .waiting-cars-container {
      width: 100%;
      max-width: 700px;
      margin: 40px auto 0 auto;
      padding-bottom: 60px;
    }
    .waitcar-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .waitcar-card {
      list-style: none;
      margin-bottom: 24px;
    }
    .card-custom {
      background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
      border-radius: 18px;
      box-shadow: 0 4px 24px 0 rgba(33, 150, 243, 0.15), 0 1.5px 4px 0 rgba(33, 150, 243, 0.10);
      transition: box-shadow 0.3s, transform 0.3s;
      padding: 18px 28px;
      display: flex;
      align-items: center;
    }
    .card-custom:hover {
      box-shadow: 0 8px 32px 0 rgba(33, 150, 243, 0.25), 0 3px 8px 0 rgba(33, 150, 243, 0.18);
      transform: translateY(-2px) scale(1.02);
    }
    .row {
      display: flex;
      align-items: center;
    }
    .icon-col {
      flex: 0 0 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .car-icon {
      width: 48px;
      height: 48px;
      display: block;
    }
    .info-col {
      flex: 1;
      margin-left: 18px;
    }
    .UserID {
      font-weight: bold;
      font-size: 20px;
      color: #1565c0;
      margin-bottom: 6px;
    }
    .id-highlight {
      color: #1976d2;
      background: #e3f2fd;
      border-radius: 6px;
      padding: 2px 8px;
    }
    .tags {
      margin-bottom: 6px;
    }
    .tag {
      display: inline-block;
      font-size: 13px;
      border-radius: 8px;
      padding: 2px 10px;
      margin-right: 8px;
      color: #fff;
    }
    .area {
      background: #42a5f5;
    }
    .pile {
      background: #1976d2;
    }
    .QueueingTime {
      font-size: 13px;
      color: #607d8b;
    }
  </style>
</head>
<body>
  <div class="waiting-cars-container">
    <ul class="waitcar-list">
      <li class="waitcar-card">
        <div class="card-custom">
          <div class="row align-center">
            <div class="icon-col">
              <!-- 蓝色炫酷小车SVG图标 -->
              <svg class="car-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="6" y="20" width="36" height="12" rx="6" fill="#2196F3"/>
                <rect x="10" y="14" width="28" height="10" rx="5" fill="#64B5F6"/>
                <circle cx="14" cy="36" r="4" fill="#1976D2"/>
                <circle cx="34" cy="36" r="4" fill="#1976D2"/>
                <rect x="18" y="18" width="12" height="6" rx="2" fill="#BBDEFB"/>
              </svg>
            </div>
            <div class="info-col">
              <div class="UserID">车辆ID: <span class="id-highlight">137</span></div>
              <div class="tags">
                <span class="tag area">区域: CTA</span>
                <span class="tag pile">充电桩: CTA</span>
              </div>
              <div class="QueueingTime">进入等候区时间：0</div>
            </div>
          </div>
        </div>
      </li>
      <li class="waitcar-card">
        <div class="card-custom">
          <div class="row align-center">
            <div class="icon-col">
              <svg class="car-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="6" y="20" width="36" height="12" rx="6" fill="#2196F3"/>
                <rect x="10" y="14" width="28" height="10" rx="5" fill="#64B5F6"/>
                <circle cx="14" cy="36" r="4" fill="#1976D2"/>
                <circle cx="34" cy="36" r="4" fill="#1976D2"/>
                <rect x="18" y="18" width="12" height="6" rx="2" fill="#BBDEFB"/>
              </svg>
            </div>
            <div class="info-col">
              <div class="UserID">车辆ID: <span class="id-highlight">140</span></div>
              <div class="tags">
                <span class="tag area">区域: CTA</span>
                <span class="tag pile">充电桩: CTA</span>
              </div>
              <div class="QueueingTime">进入等候区时间：0</div>
            </div>
          </div>
        </div>
      </li>
      <li class="waitcar-card">
        <div class="card-custom">
          <div class="row align-center">
            <div class="icon-col">
              <svg class="car-icon" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="6" y="20" width="36" height="12" rx="6" fill="#2196F3"/>
                <rect x="10" y="14" width="28" height="10" rx="5" fill="#64B5F6"/>
                <circle cx="14" cy="36" r="4" fill="#1976D2"/>
                <circle cx="34" cy="36" r="4" fill="#1976D2"/>
                <rect x="18" y="18" width="12" height="6" rx="2" fill="#BBDEFB"/>
              </svg>
            </div>
            <div class="info-col">
              <div class="UserID">车辆ID: <span class="id-highlight">135</span></div>
              <div class="tags">
                <span class="tag area">区域: CTB</span>
                <span class="tag pile">充电桩: CTB</span>
              </div>
              <div class="QueueingTime">进入等候区时间：0</div>
            </div>
          </div>
        </div>
      </li>
      <!-- 你可以继续添加更多静态卡片 -->
    </ul>
  </div>
</body>
</html> 